<template>
  <div  class="article">
    <template v-if="article">
      <div class="article-men">
        <span class="men-img" v-if="article.get('author').get('avatar')[0]"><img v-lazy="article.get('author').get('avatar')[0]"  width="68px" height="68px" class="img"></span>
        <span class="mine-img" v-else>
          <i class="fa fa-user-circle-o  fa-5x" aria-hidden="true"></i>
        </span>
        <span class="title">标题：{{ article.get('title') }}</span>
        <span class="font1">
          （ author: {{ article.get('author').get('username') }}&nbsp;&nbsp;cate: {{ article.get('category_name') }}&nbsp;￥:{{article.get('author').get('money')}}）
        </span>
        <div v-if="uid !== article.get('author').id"  class="like">
          <span @click="addLike(article.get('like_num'))"  class="like-add"><i class="fa fa-thumbs-o-up " aria-hidden="true"></i>{{(article.get('like_num'))}}</span>
          <span @click="addDisLike(article.get('dislike_num'))" class="dis-add"><i class="fa fa-thumbs-o-down " aria-hidden="true"></i>{{(article.get('dislike_num'))}} </span>
        </div>
      </div>
      <el-card class="box-card">
        <div class="content" v-html="article.get('content')" ></div>
        <div class="img" >
          <div class="block"  v-if="article.get('article_img')[0]">
            <el-carousel height="170px">
              <el-carousel-item v-for="img in article.get('article_img')" :key="img">
                <img
                  v-lazy="img"
                  :alt="tips"
                  v-preview="img"
                  preview-title-enable="true"
                  preview-nav-enable="true"
                  class="image"
                  width="100%"
                  height="100%"
                >
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="card-time">
            <span class="">发布时间：</span>
            <time class="time">{{ article.get('createdAt')|formatTime }}</time>
          </div>
        </div>
        <hr>

        <!--图片结束-->
        <!--打赏-->
        <div class="gift" v-if="uid == article.get('author').id === false">
          <el-popover
            ref="popover1"
            placement="top-start"
            title="打赏需知"
            width="200"
            trigger="hover"
            content="送花代表5个简币，送车代表30个简币，送飞机代表100个简币,打赏要谨慎哦！！！！！"
          >
          </el-popover>
          <el-button v-popover:popover1>打赏</el-button>
          <div class="money">
            <span @click="addFlower(article.get('flower_num'),article.get('author').get('money'))">
            <img src="../../assets/img/flower.png" width="30px" height="50px"/>{{article.get('flower_num')}}个简币
          </span>
            <span @click="addCar(article.get('car_num'),article.get('author').get('money'))">
            <i class="fa fa-car fa-3x" aria-hidden="true"></i>
            {{article.get('car_num')}}个简币</span>
            <span @click="addFly(article.get('fly_num'),article.get('author').get('money'))">
            <i class="fa fa-fighter-jet fa-3x" aria-hidden="true"></i>
            {{article.get('fly_num')}}个简币</span>
          </div>

        </div>
        <div v-else></div>
        <!--发布评论-->
        <div class="add-comment">
          <el-form ref="form" :model="form" :rules="rules"    label-position="left"  class="form">
            <el-form-item label="评论" prop="comment" class="el-form-item1">
              <el-input type="textarea" v-model="form.comment"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="submit" type="primary" @click="submit" @keyup.enter="submit">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
        <hr>
        <!--评论区-->
     <!--   {{ article.get('comment') }}&nbsp;-->
        <div class="comment-info">
          <div class="comment-button">
            <el-tooltip class="item" effect="dark" content="点击查看评论！！" placement="top-start">
              <span @click="openComment"><i class="fa fa-commenting-o fa-2x" aria-hidden="true"></i>{{this.counter}}</span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="点击刷新评论！！" placement="top-start">
              <i class="fa fa-refresh fa-2x" aria-hidden="true" @click="reComment"></i>
            </el-tooltip>
          </div>
          <hr>
          <div class="comment-list" v-for="(item,index) in comments" v-if="ishowComment">
            <div class="list">
              <div class="men">
                <span class="men-img" v-if="item.get('author').get('avatar')[0]">
                  <img
                    class="img"
                    v-lazy="item.get('author').get('avatar')[0]"
                    alt="图片">
                </span>
                <span class="men-img" v-else>
                  <i class="fa fa-user-circle-o  fa-2x" aria-hidden="true"></i>
                </span>
                <router-link :to="{name: 'User', params: { id: item.get('author').id}}">
                <span class="name">{{item.get('author').get('username')}}</span>
                </router-link>
                <span class="badge" >{{index+1}}</span>
              </div>
              <div class="content">
                  {{item.get('content')}}
                <span class="time">发布时间{{item.get('createdAt')|formatTime }}
                  <span  @click.stop="checkReback(item.get('objectId'))">
                    <el-tooltip  class="item" effect="dark" content="点击查看回复" placement="top-start">
                    <i class="el-icon-info"></i>
                    </el-tooltip>
                  </span>
                  </span>
              </div>
            </div>
            <!--回复数据显示区域-->
            <div class="reback-list" v-for="data in reback">
              <div  v-if="(data.get('comment').get('objectId') == item.get('objectId')) && reback.length > 0 ">
                <router-link :to="{name: 'User', params: { id: data.get('author').id}}">
                <span class="name">{{data.get('author').get('username')}}</span>&nbsp;
                </router-link>
                <span>回复:</span>
                <span>{{data.get('content')}}</span>
              </div>
            </div>
            <!--添加回复区域-->
            <div class="reback">
              <el-collapse  @change="handleChange">
                <el-collapse-item title="回复:" name="1">
                  <div class="reback-input" >
                    <el-input placeholder="最大输入140" v-model="rebackInput"></el-input>
                    <span class="reback-input-button" @click="addReback(item.get('objectId'))" @keyup.enter="addReback(item.get('objectId'))">确认</span>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
        <!--删除-->
        <div class="delete" v-if="uid == article.get('author').id">
          <router-link :to="{ name:'ArticleEdit', params: {id: article.id} }"  tag="el-button">修改</router-link >
          <el-button type="primary" icon="delete"  @click="destroy">删除</el-button>
        </div>
      </el-card>


    </template>
  </div>
</template>

<script>
  import { mapGetters ,mapState} from 'vuex'
  import Func from '../../assets/js/common.js'
  import ElButton from "element-ui/packages/button/src/button";
  export default {

    components: {ElButton},
    name: 'index',
    data () {
      return {
        article: null,
        tips:'点击关闭',
        ishowComment:false,
        comments:'',
        commentPer:'',
        rebackInput:'',
        reback:null,
        counter:'',
        form: {
          comment:''
        },
        rules: {
          comment: [
            { required: true, message: "必须填写哦!", trigger: 'blur' },
          ],
        },
        validate: {
          error: false
        }
        /* likeNumber:null*/

      };
    },
    created(){
      const id = this.$route.params.id;
      this.getArticle(id)
 /*     this.$nextTick(() => {
        this.getComment();
      })*/
    },
    computed: {
      ...mapGetters(['uid']),
      ...mapState(['user']),

    },
    //时间过滤
    filters: {
      formatTime: Func.formatTime,
      isLike(arr, userInfo) {
        if (arr && userInfo) {
          if(arr.length <= 0) {
            return 'icon-xihuan'
          }
          return arr.map(function(item) {
            if (item === userInfo.objectId) {
              return 'icon-xihuan1'
            } else {
              return 'icon-xihuan'
            }
          });
        } else {
          return 'icon-xihuan'
        }
      }
    },
    methods: {
      openComment() {
        this.ishowComment = !this.ishowComment
      /*  this.getComment()*/

      },
      handleChange(val) {
        console.log(val);
      },
      reComment(){
        const id = this.$route.params.id;
        this.getArticle(id)
      },
      getArticle(id){
        const q = new this.$api.SDK.Query('Article');
        q.include('author');
        q.get(id).then((article) => {
          this.article = article;
          this.$nextTick(() => {
            this.getComment(this.article);
            this.$Progress.finish()
          })
        }).catch(console.log)
      },
      getComment(article){
        console.log(article)
        const q = new this.$api.SDK.Query('comment');
        q.include('author');
        q.include('article');
        q.equalTo('article',article);
        q.descending('createdAt');
        q.count().then( (count)=> {
          console.log("ffffffffffffffffffffs")
          this.counter = count;
          console.log(this.counter);
        });
        q.find().then((comment) => {
          this.comments = comment;
          console.log("评论详情")
          console.log(this.comments)
        }).catch(console.log)
      },
      checkReback(obj){
        const p = new this.$api.SDK.Query('comment');
        p.get(obj).then((commentper) => {
          this.commentPer = commentper;
          this.$nextTick(() => {
            this.getReback(this.commentPer);
          })
        })
      },
      /*得到回复的数据*/
      getReback(commentPer){
        const q = new this.$api.SDK.Query('reback');
        q.include('author');
        q.include('comment');
        q.equalTo('comment',commentPer);
        q.descending('createdAt');
        q.find().then((reback) => {
          this.reback = reback;
          console.log("回复详情****************8")
          console.log(this.commentPer)
          console.log(this.reback)
        }).catch(console.log)
      },
      /*删除*/
      destroy(){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.article.destroy().then(() => {
            const p = new this.$api.SDK.Query('_Status');
            p.equalTo('article', this.article);
            p.destroyAll();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$router.replace({path:'/article?type=me'});
          }).catch(()=>{
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
 /*     destroy(){
        this.article.destroy().then(() => {
          this.$message({type:'success', message: '删除成功'});
          this.$router.replace({path:'/article?type=all'});
        })
      },*/
      /*添加评论*/
      setComment(){
        const comment = new this.$api.SDK.Object('comment');
        comment.set('content', this.form.comment);
        comment.set('author',this.user);
        comment.set('article',this.article);
        comment.save();
        console.log("评论数据")
        console.log(comment)
      },
      submit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.setComment()
            this.$message.success('评论成功');
            this.form.comment= '';
          } else {
            console.log('error submit!!');
            this.$message.error('错了哦，您填写的信息有错误，请按照提示修改。');
            return false;
          }
        })
      },
      addReback(obj) {
        console.log(obj)
        const p = new this.$api.SDK.Query('comment');
        p.get(obj).then((commentper) => {
          this.commentPer = commentper;
          this.$nextTick(() => {
            const reback = new this.$api.SDK.Object('reback');
            reback.set('comment',this.commentPer);
            reback.set('content',this.rebackInput);
            reback.set('animalDate',this.article);
            reback.set('author',this.user);
            reback.save().then(() => {
              this.rebackInput=' ';
              this.$message.success('回复成功');
              console.log("回复数据")
              console.log(reback)
            });
          })
        }).catch(this.commentPer)
      },
        addLike(val) {
          this.article.set('like_num', val+1);
          // 保存到云端
          this.article.save()
          this.$message({type:'success', message: '点赞成功'});
          },
        addDisLike(val){
          console.log(val)
          this.article.set('dislike_num', val-1);
          // 保存到云端
          this.article.save();
          this.$message({type:'success', message: '太Low啦！！！'});
        },
        addFlower(val,money) {
          console.log(val)
          this.article.set('flower_num', val+5);
          this.article.get('author').set('money',money+5)
          this.$message({type:'success', message: '+5'});
          // 保存到云端
          this.article.save();
          this.article.get('author').save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },
        addCar(val,money) {
          console.log(val)
          this.article.set('car_num', val+30);
          this.article.get('author').set('money',money+30)
          this.$message({type:'success', message: '+30'});
          // 保存到云端
          this.article.save();
          this.article.get('author').save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },
        addFly(val,money) {
          console.log(val)
          this.article.set('fly_num', val+100);
          this.article.get('author').set('money',money+100)
          this.$message({type:'success', message: '+100'});
          // 保存到云端
          this.article.save();
          this.article.get('author').save();
          this.$router.replace({path:'/article/'+this.$route.params.id});
        },

    }
  }
</script>

<style lang="less" scoped>
  .article{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
    .article-men{
      display: flex;
      align-items: center;
      width: 90%;
      margin: 0 auto;
      text-align: left;
      .men-img{
        display: inline-block;
        .img{
          border-radius: 12px;
        }
      }
      .title{
        margin-left: 10px;
        display: inline-block;
        line-height: 68px;
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #333333;
        letter-spacing: 0;
      }
      .like{
        text-align: center;
        margin-left: 10px;
        .like-add{
          border: 1px solid red;
          color: red;
          .fa-thumbs-o-up{
            color: red;
          }
        }
        .dis-add{
          color: cornflowerblue;
          border: 1px solid cornflowerblue;
          .fa-thumbs-o-down{
            color: cornflowerblue;
          }
        }
      }
      .like span{
        display: inline-block;
        color: #adadad;
        border: 1px solid #adadad;
        border-radius: 12px;
        width: 60px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 20px;
      }
      .like span:hover{
        cursor: pointer;
         background-color: #e6e6e6;
      }
    }
    .box-card{
      width: 90%;
      margin: 0 auto;
      margin-top: 20px;
      .content{
        text-align: justify;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #555555;
        letter-spacing: 0;
        line-height: 24px;
      }
      .img{
        display: flex;
        align-items: flex-end;
        .block{
          width: 60%;
          cursor: pointer;
        }
        .card-time{
          margin-left: 10px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #B8B8B8;
          letter-spacing: 0;
          line-height: 18px;
        }
      }

      .gift{
        display: flex;
        align-items: center;
        text-align: left;
        flex-flow: row;
        font-family: PingFangSC-Regular;
        color: #999999;
        letter-spacing: 0;
        margin-top: 20px;
        width: 100%;
        padding: 20px;
        border: 1px solid #f2f2f2;
        border-left: none;
        border-right: none;
      }
      .gift span{
        display: inline-block;
        margin-left: 20px;
        cursor: pointer;
      }
      .add-comment{
        .form{
          width: 100%;
          display: flex;
         align-items:flex-end;
          justify-content: center;
          justify-content: space-between;
          .el-form-item1{
            width: 85%;
          }
          .submit{

          }
        }

      }
      .comment-info{
        .comment-button{
          display: flex;
          justify-content: space-between;
          width: 100%;
          color: #9d9c9c;
          .fa-commenting-o{
            color: #55acee;
            cursor: pointer;
          }
          .fa-refresh{
            color: red;
            cursor: pointer;
          }
        }
        .comment-list{
          width: 100%;
          padding: 10px;
          .list{
            border-bottom: 1px solid #55acee;
            .men{
              display:flex;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 18px;
              color: #333333;
              letter-spacing: 0;
              .men-img{
                display: block;
                text-align: center;
                align-items: center;
                margin-right: 10px;
                .img{
                  border-radius: 4px;
                  box-shadow: 0 0 0 2px powderblue;
                  width: 32px;
                  height: 32px;
                }
                .fa-user-circle-o{
                  color:#5e90d6;
                }
              }
              .badge{
                margin-left: 10px;
              }
            }
            .content{
              margin-left: 42px;
              display: flex;
              justify-content: space-between;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #333333;
              letter-spacing: 0;
              line-height: 20px;
              .time{
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #999999;
                letter-spacing: 0;
                .el-icon-info{
                  margin-left: 20px;
                  font-size: 28px;
                  color: #55acee;
                  cursor: pointer;
                }
              }
            }
          }
          .list:hover{
            background-color: #f5fafa;
          }
          .reback-list{
            text-align: left;
            margin-left: 42px;
            background: #F8F8F8;
            padding:6px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #666666;
            letter-spacing: 0;
            line-height: 20px;
            .name{
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #55acee;
              letter-spacing: 0;
              line-height: 20px;
            }

          }
          .reback{
            text-align: left;
            .reback-input{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .reback-input-button{
                cursor: pointer;
                margin-left: 40px;
                margin-right: 20px;
                display: inline-block;
                width: 50px;
                height: 30px;
                box-shadow: 1px 1px 1px 1px #A8CBFA;
                border-radius: 6px;
                font-size: 10px;
                text-align: center;
                line-height: 30px;
                background: #A8CBFA;
                color: #ffffff;

              }
            }
          }
        }

      }
    }

  }



  .font1{
    font-weight: 100;
    font-size:16px;
  }




  .oprator{
 /*   position: absolute;
    right: 0;
    top: 50px;*/
  }


  .el-button{
    background-color: #FFB5C5!important;
    color: #ffffff!important;
  }

  /*图片*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
